uni

2023-12-14 01:55| 来源: 网络整理| 查看: 265

uni-app中使用 async + await 实现异步请求同步化原创

明天也要努力 2021-07-13 16:05:02 ©著作权

文章标签 uni-app es6 javascript 前端文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者明天也要努力的原创作品，请联系作者获取转载授权，否则将追究法律责任

问题：在uni-app中，uni.request等网络请求都是异步的，直接使用可能会导致页面渲染完毕时，数据还未成功获取的情况。解决方法：

export default { data() { return {}; }, methods:{ getOutInfo(){ return new Promise((resolve, reject) => { uni.request({ url : `请求地址`, method : "GET", data : {}, success: (res) => { console.log(res) resolve('suc'); // 千万别忘写！！！ }, fail:(err)=>{ reject('err') } }) }) }, async mountDealCount(){ await this.getOutInfo（） console.log('我在数据获取之后执行') } }, beforeMount(){ this.mountDealCount() } }

效果： uni-app中使用 async + await 实现异步请求同步化_前端注意：当调用的级数增加的时候，需要逐级的增加async和await

export default { methods:{ getOutInfo(){ return new Promise((resolve, reject) => { uni.request({ url : `请求地址`, method : "GET", data : {}, success: (res) => { console.log(res) resolve('suc'); // 千万别忘写！！！ }, fail:(err)=>{ reject('err') } }) }) }, async dealInfo(){ await this.getOutInfo（） console.log('我在数据获取之后执行') }, async loadDeal(){ await this.dealInfo（） console.log('我在 dealInfo 之后执行') } }, beforeMount(){ this.loadDeal() } }

总结：

将uni.request请求封装在Promise构造函数中; 使用async + await;

打赏赞收藏评论分享举报

上一篇：Vue状态管理器（vuex）详解及应用场景

下一篇：解决 Vant中输入框（Field）组件获取不到输入值

【本文地址】

uni

uni

今日新闻

推荐新闻